<template>
	<view class="main">
		<view class="nav">
			<view class="left">
				<i class="iconfont iconfanhui-copy" @click="back"></i>
			</view>
			<view class="search-wrap">
				<input v-model="inputVal" class="input-search" type="text" placeholder-class="search-placeholder" placeholder="请输入课程名称/老师姓名" @confirm="confirmSearch">
				<text v-if="inputVal.length > 0" class="iconfont iconjujue icon_guanbi" @tap="clearText"></text>
			</view>
			<view class="right" @click="confirmSearch">
				<text>搜索</text>
			</view>
		</view>
		
		<div class="content">
			<!-- 筛选 --> <!-- 列表 -->
			<block v-if="!is_history">
				<v-filter-bar ref="filterbar" @ck='ck' @selectTime='selectTime' @sureSubmit='sureSubmit'></v-filter-bar>
				<view class="lesson-warp" @click="hideAll" v-if="subject_card_list.length > 0 ">
					<view class="item">
						<view v-for="(item,index) in subject_card_list" :key='index'>
							<v-competitive-summary mclass="lesson-card" :item="item">
							</v-competitive-summary>
						</view>
						
					</view>
				</view>
			</block>
			
			<!-- 历史记录 -->
			<block v-else>
				<view class="history-wrap">
					<view class="ops-item">
						<text>历史记录</text>
						<text class="ops-clean" @click="clearHistory">清空历史</text>
					</view>
					<view class="item" v-for="(item, idx) in history_list" :key="idx" @click="linkHistoryDetail(item)">
						<text>{{ item }}</text>
					</view>
				</view>
			</block>
		</div>
	</view>
</template>

<script>
	import filter from './filter-bar.vue'
	import competitiveSummary from './competitive-summary'
	export default {
		components: {
			vCompetitiveSummary: competitiveSummary,
			vFilterBar: filter
		},
		props: {
			subject_card_list: Array,
			history_list: Array,
			is_history: Boolean,
			
		},
		data () {
			return {
				inputVal: '', // 搜索值
			}
		},
		methods:{
			// 后退
			back () {
				uni.reLaunch({
					url: "./free-index"
				})
			},
			
			// 开始搜索
			confirmSearch(){
				this.inputVal = this.inputVal.trim();
				if (this.inputVal.length <= 0) return this.showTotast('不能为空哦~')
				this.$emit('confirmSearch', this.inputVal)
			},
			
			// 清空搜索
			clearText() {
				this.inputVal = ''
				console.log("input val => ",this.inputVal)
			},
			
			// 历史列表详情点击搜索
			linkHistoryDetail(histry_name) {
				this.inputVal = histry_name
				this.$emit('linkHistoryDetail', this.inputVal)
			},
			
			// 清空历史记录
			clearHistory (){
				this.$emit('clearHistory')
			},
			
			// 时间的筛选
			selectTime(item) {
				if (JSON.stringify(item) === '{}') {
					this.hideAll()
				}
				this.$emit('selectTime', item)
			},
			
			// 确定
			sureSubmit() {
				this.hideAll()
				this.$emit('sureSubmit')
			},
			
			// 排序 的筛选
			ck(index) {
				this.$emit('ck', index)
			},
			
			// 隐藏筛选弹窗
			hideAll(){
				this.$refs.filterbar.hideAll()
			},
			
			// 封装吐司
			showTotast(title, icon = 'none') {
				uni.showToast({
					title: title,
					icon: icon
				})
			}
		},
		watch: {
			// 当搜索框没有值的时候将之前的列表清空
			inputVal(new_value) {
				if (!new_value) {
					this.$emit('clearLog')
				}
			}
		}
	}
</script>

<style>
	page {
		 background: #F7F7F7;
	}
	/* *{transition: ease; transition-duration: 1.5s;} */
	.nav {top:0;left:0;width:100%;height:88upx;padding:94upx 6upx 54upx;display:flex;overflow:hidden;justify-content:space-between;align-items:center;box-sizing:border-box;color:#fff;background-color:#fe9900;transition-property:all;z-index:99999;position: fixed;}
	.nav .iconfanhui-copy{margin-left:20upx;font-size:28upx;color:#fff}
	.nav .left{display:inline-flex}
	.nav .left .iconfanhui-copy {font-size: 32upx; font-weight: 600;}
	.nav .level-select{margin-left:20upx}
	.nav .level-select:after{content:"\e7b1";color:#fff;font-family:iconfont;font-size:20upx!important;border-width:10upx;margin:20upx 5upx 0 5upx;margin:5upx}
	.nav .search-wrap{display:flex;position: relative;}
	.nav .search-wrap .input-search{background:#FAFAFA; width: 550upx; flex:1; height:56upx; text-indent:1em;border-radius: 4upx;color: #333;}
	.nav .search-wrap .search-placeholder {font-size:13px;font-family:Source Han Sans CN;font-weight:400;line-height:20;color: #CCCCCC;}
	.right {display:flex;justify-content:flex-end;align-items:center}
	.right text{margin:0 30upx 0 20upx;color:#fff;font-size:28upx !important;opacity: 0.7;}
	
	.content{margin-top: 154upx;}
	.history-wrap .iconfontn{opacity: 0; text-align: right; flex:1; color:#fe9900;}
	.history-wrap .item.active{color:#fe9900;}
	.history-wrap .active .iconfontn{opacity: 1;}
	
	.history-wrap .ops-item {display:flex;align-items:center; padding: 0 40upx; height: 80upx; color:#999999; text-indent:5px; justify-content: space-between;}
	.history-wrap .ops-item .ops-clean {color:#fe9900;}
	.history-wrap .item{display:flex; align-items:center; margin: 0 40upx; height: 70upx; color:#333333; text-indent:5px;border-bottom: 2upx solid #E5E5E5;}
	
	.lesson-warp{padding: 0 40upx;}
	.lesson-warp .item{margin-bottom: 20upx; width:100%;}
	.item .lesson-card{background: #FFF !important; border-radius: 20upx;}
	
	.icon_guanbi{
		position: absolute;
		margin-right: 12upx;
		right: 0;top: 0;
		font-size: 36upx;
		color: #999999;
	}
</style>